<template>
	<view class="content">

		<!-- 滚动区域 -->
		<view class="scroll-panel" :style="{ 'top': (!showCategory?('-'+height + 'px'):'0px')}">
			<view class="list-box">
				<view class="left"> 
					<scroll-view scroll-y="true" :style="{ 'height':height + 'px' }">
						<view class="item" 
							v-for="(item,index) in categoryData"
							:key="index" 
							:class="{ 'active':index==leftIndex }" 
							@tap="changeCategory(index)"
						>{{item.name}}</view>
			        </scroll-view>
				</view>
				<view class="main">
					<scroll-view  scroll-y="true" :style="{ 'height':height + 'px' }" scroll-with-animation="true">
						<view class="all-tab text-gray flex align-center justify-between" :class="categoryParam.oneLevelId != -1?'text-blue':''" @tap="checkCategory(0,curRightData.categoryId,curRightData.name)">
							<text class="text-bold">全部{{curRightData.name}}</text>
							<text class="cuIcon-right"></text>
						</view>
						<view v-for="(item,index) in curRightData.children" :key="index" >
							<view class="all-tab second-level-tile text-gray flex align-center justify-between" :class="item.categoryId == categoryParam.twoLevelId?'text-blue':''" @tap="checkCategory(1,item.categoryId,curRightData.name,item.name)">
								<text class="text-bold">{{item.name}}</text>
								<text class="cuIcon-right"></text>
							</view>
							<view class="three-level-category">
								<view class="item" v-for="(item1,index1) in item.children" :key="index1" :class="item1.categoryId == categoryParam.threeLevelId?'text-blue':''" @tap.stop="checkCategory(2,item1.categoryId,curRightData.name,item.name,item1.name)">{{item1.name}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="shade" v-show="showCategory" @tap="showCategory=false;"></view>
		<view class="top-data">
			<view class="cu-bar search bg-white">
				<view class="cuIcon-back margin-left-sm" @tap="toBack"></view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" v-model="name" placeholder="搜索图片、文章、视频" confirm-type="search" @confirm="showListByName"></input>
				</view>
			</view>
			<view class="padding-sm bg-white flex align-center justify-between" @tap="showCategory=true;">
				<view>
					<text>{{computedName}}</text>
				</view>
				<text class="cuIcon-unfold"></text>
			</view>
		</view>
		<view class="perch"></view>
		<view class="works-list" v-if="userArray">
			<view class="list-item" v-for="(item1,index) in userArray" :key="index" @tap="goDetail(index)">
				<image class="main-img" :src="item1.Sp_material.backImage"></image>
				<view class="flex align-center justify-between margin-tb-xs">
					<text class="item-tilte">{{item1.Sp_material.name}}</text>
					<image class="icon-img" src="/static/tabBar/category_selected.png"></image>
				</view>
				<view class="flex align-center justify-between text-gray">
					<text class="">{{item1.Sp_material.create_time}}</text>
					<text class="">荐</text>
				</view>
			</view>
		</view>
		<nomore :visible="true" :text="worksListMode?'上拉加载更多':'没有更多作品'"></nomore>
	</view>
</template>

<script>
	import json from '@/pages/category/category.js';
	export default {
		data() {
			return {
				showCategory:false,
				leftIndex:0,
				height:0,
				categoryData:json.categoryData ,//模拟数据
				curRightData:[] ,
				worksListMode:true,
				userArray : [] ,
				categoryParam:{
					oneName:'',
					twoName:'',
					threeName:'',
					oneLevelId:-1,
					twoLevelId:-1,
					threeLevelId:-1
				},
				name : ''
			};
		},
		computed:{
			computedName(){
				 /*
				 <text>{{categoryParam.oneName}}</text>
				 <text v-show="categoryParam.twoName">/{{categoryParam.twoName}}</text>
				 <text v-show="categoryParam.threeName">/{{categoryParam.threeName}}</text>
				 */
				let name = this.categoryParam.oneName;
				if(this.categoryParam.twoName){
					name += '/' + this.categoryParam.twoName
				}
				if(this.categoryParam.threeName){
					name += '/' + this.categoryParam.threeName
				}
				return name;
			}
		},
		onLoad(option) {
			if(option.name){
			//传了名字
				this.name = option.name;
				this.showListByName();
			}else{
				if(option.oneName) this.categoryParam.oneName = option.oneName
				if(option.twoName) this.categoryParam.twoName = option.twoName;
				if(option.threeName) this.categoryParam.threeName = option.threeName;
				if(option.oneLevelId) this.categoryParam.oneLevelId = option.oneLevelId;
				if(option.twoLevelId) this.categoryParam.twoLevelId = option.twoLevelId;
				if(option.threeLevelId) this.categoryParam.threeLevelId = option.threeLevelId;
				this.height = uni.getSystemInfoSync().windowHeight - 200;
				this.changeCategory(0);
				this.showListByLeiXing();
			}
		},
		methods:{
			goDetail(index){
				uni.navigateTo({
					url: `../detail/detail?id=${this.userArray[index].Sp_material.id}`
				})
			},
			async showListByName(){
				this.showList({
							'name$' : `%${this.name}%`
				});
			},
			async showListByLeiXing(){
				let leixing = this.computedName;
				this.showList({
							'leixing$' : `%${leixing}%`
				});
			},
			async showList(Sp_material){
				let data = await this.$httpApi.query({
					"[]": {
						Sp_material
					}
				});
				console.log(Sp_material,data)
				//  data['[]']   等价于  data.[]   // [] 是特殊字符报错必须用这种形式。
				this.userArray = data['[]'] ; 
			},
			checkCategory(type,id,oneName,twoName,threeName){ //type 0:全部 1：二级 2：三级
				
				this.categoryParam.oneLevelId = -1;
				this.categoryParam.twoLevelId = -1;
				this.categoryParam.threeLevelId = -1;
				this.categoryParam.twoName = '';
				this.categoryParam.threeName = '';
				this.categoryParam.oneName = oneName;
				if(type == 0){
					this.categoryParam.oneLevelId = id;
				}else if(type == 1){
					this.categoryParam.twoLevelId = id;
					this.categoryParam.twoName = twoName;
				}else if(type == 2){
					this.categoryParam.threeLevelId = id;
					this.categoryParam.twoName = twoName;
					this.categoryParam.threeName = threeName;
				}
				this.showListByLeiXing();
				this.showCategory = false;
			},
			toBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			changeCategory(index){ 
				this.leftIndex = index;
				this.curRightData = this.categoryData[index];
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	.text-blue{
		color: #55b5e1 !important;
	}
	.content{
		position: relative;
		.shade{
			width: 100%;
			background-color: rgba(136, 136, 136, 0.5);
			z-index: 99;
			height: 100%;
			top: 0;
			position: fixed;
		}
		.scroll-panel{
			position: fixed;
			width: 100%;
			top: 0;
			transition: all 0.5s;
			z-index: 100;
		}
	}
	
	.top-data{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10;
	}
	.perch{
		height: 180upx;
	}
	.works-list {
		margin-top: 10upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.list {
			width: 97%;
			margin: 0 auto;
			.onworks {
				width: 100%;
				height: 80vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;
				image {
					margin-top: 100upx;
					width: 70%;
				}
			}
		}
		.list-item{
			width: 49%;
			overflow: hidden;
			margin-bottom: 20upx;
			.main-img{
				width: 100%;
				height: 450upx;
			}
			.item-tilte{
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				text-align: justify;
				overflow: hidden;
			}
			.icon-img{
				width: 30upx;
				height: 30upx;
			}
		}
	}

.search{
	border-bottom: 1px solid #F1F1F1;
}
.list-box{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
	font-size: 28rpx;
	
	.left{
		width: 200rpx;
		background-color: #f6f6f6;
		line-height: 100rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: bold;
		.item{
			border-bottom: 1px solid #dedede;
			padding-left: 20rpx;
			position: relative;
			&:not(:first-child) {
				// margin-top: 1px;
			
				&::after {
					content: '';
					display: block;
					height: 0;
					border-top: #d6d6d6 solid 1px;
					width: 620upx;
					position: absolute;
					top: -1px;
					right: 0;
					transform:scaleY(0.5);	/* 1px像素 */
				}
			}
			
			&.active,&:active{
				color: #55b5e1;
				background-color: #fff;
			}
		}
	}
	.main{
		padding: 0 20upx 0 40upx;
		background-color: #fff;
		// padding-left: 20rpx;
		width: 0;
		flex-grow: 1;
		box-sizing: border-box;
		.all-tab{
			// padding: 0 20upx;
			height: 102upx;
			line-height: 102upx;
		}
		.three-level-category{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10upx 0 20upx 0;
			.item{
				color: #a7b0b5;
				width: 50%;
				padding: 20upx 0;
			}
		}
		.second-level-tile{
			border-bottom: 1px solid #e5e5e5;
		}
	}
}
</style>
